/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TextInput,
    TouchableOpacity,

} from 'react-native';

export default class Login extends React.Component {



    render() {
        return (

        <View style={styles.contentStyle}>
                { /* other code from before here */ }
                <View style={styles.ImageViewStyle}>
                    <Image style={styles.LogoImageStyle} source={{uri:'logo'}} >

                    </Image>
                </View>

                <View style={styles.AccountViewStyle}>
                    <Text style={styles.AccountStyle}>
                        账号
                    </Text>
                    <TextInput placeholder='输入手机号' style={styles.inputStyle1}>

                    </TextInput>
                    <View style={styles.oneLineViewStyle} ></View>
                </View>

                <View style={styles.PwdViewStyle}>
                    <Text style={styles.PwdStyle}>
                        密码
                    </Text>
                    <TextInput placeholder='输入密码' style={styles.inputStyle1}></TextInput>
                    <View style={styles.twoLineViewStyle}></View>

                </View>


                <View style={styles.TwoBtnViewStyle }>
                     <Button title='立即注册' color="orange"  onPress={()=>{this.pushToRegist()}}
                     />
                    <Button title='忘记密码?' color="gray"   onPress={()=>{}}
                    />
                 </View>



                <TouchableOpacity>
                <View style={styles.loginBtnViewStyle }>
                    <Text style={styles.loginBtnStyle}>
                        登录
                    </Text>
                </View>
                </TouchableOpacity>

            </View>

        );
    }

    // 跳转到注册界面
    pushToRegist(){
        this.props.navigation.navigate("Regist");
    }
}



const styles = StyleSheet.create({

    contentStyle: {
        backgroundColor:'white',
        flex:1,
    },

    ImageViewStyle: {
        top:48,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'

    },

    LogoImageStyle: {
        width:248,
        height:118,

        // 加载图片居中不拉伸
        resizeMode:'center'

    },


    AccountViewStyle: {
        top:50,
        width:375,
        height:50,
        flexDirection: 'row',
        // backgroundColor:'red',
        alignItems: 'center',


    },

    AccountStyle: {
        left:30,
    },

    inputStyle1:{
        marginLeft:70,
    },

    oneLineViewStyle:{
        // left:30,
        // right:30,
        // bottom:-1,
        marginLeft:30,
        marginRight:30,
        marginBottom:1,
        height:0.5,
        backgroundColor:'gray'
    },


    PwdViewStyle: {
        top:50,
        width:375,
        height:50,
        flexDirection: 'row',
        // backgroundColor:'red',
        alignItems: 'center',
    },

    PwdStyle: {
        left:30,

    },

    twoLineViewStyle:{
        left:30,
        right:30,
        bottom:0,
        height:0.5,
        backgroundColor:'red'

    },

    TwoBtnViewStyle:{
        marginTop :100,
        width:375-40,
        height:50,
        left:20,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',


    },

    loginBtnViewStyle:{
        marginTop:30,
        backgroundColor:'orange',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        width: 335,
        height:40,
        borderRadius:3,
    },

    loginBtnStyle:{
        textAlign: 'center',
        color:'white',
        fontSize:16,

    }

})



module.exports = Login;



